<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: MOZZ
  Date: 2021/12/19
  Time: 13:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="subscribes" scope="request" value="${requestScope.subscribes}" />
<%--判断是否登录--%>
<c:set var="user" value="${sessionScope.user}" />
<c:if test="${user==null}">
    <c:redirect url="login.jsp" />
</c:if>
<html>

<head>
    <title>个人中心</title>
    <link rel="stylesheet" href="public/css/iconfont.css">
    <link rel="stylesheet" href="public/css/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="public/css/markdown.css">
    <link rel="stylesheet" href="public/css/user_home.css">
    <link rel="stylesheet" href="public/css/layout/header.css">
</head>

<body>
    <div class="tar-bar">
        <div class="left-box">
            <div class="menu-item">
                <a href="codeBlog"><span class="iconfont icon-home"></span>首页</a>
            </div>
            <div class="menu-item">
                <a href="timeline.jsp?userId=${user.id}"><span class="iconfont icon-time-line"></span>时间轴</a>
            </div>
            <div class="menu-item">
                <a href="TagsServlet"><span class="iconfont icon-tag"></span>标签</a>
            </div>
            <div class="menu-item">
                <span class="iconfont icon-about"></span> 关于
            </div>
        </div>
        <div class="right-box">
            <div class="menu-item">
                <a href="CategoryServlet?userId=${user.id}"><span class="iconfont icon-folder-open"></span>分类</a>
            </div>
            <c:if test="${user!=null}">
                <div class="menu-item">
                    <!-- <span><a href="UserHomeServlet?userId=${user.id}"><c:out value="${user.nickName}"/></a></span>
                    <div class="avatar-box">
                        <img class="avatar" src="uploads/avatar/${user.avatar}" alt="">
                    </div> -->
                    <a href="UserHomeServlet?userId=${user.id}"><span class="iconfont icon-user"></span>个人中心</a>
                </div>
            </c:if>
            <c:if test="${user==null}">
                <div class="menu-item">
                    <a href="login.jsp"><button class="btn btn-success">登录</button></a>
                </div>
            </c:if>
            <div class="menu-item public-btn">
                <a href="add_blog.jsp"><button class="btn">发表博客</button></a>
            </div>
        </div>
    </div>
    <div class="banner">
        <div class="banner-bg"></div>
        <div class="type-box">
            <div id="typeWriter"></div>
            <span class="cursor"></span>
        </div>
    </div>
    <div class="container main-box">
        <c:if test="${user != null}">
            <div class="info-box">
                <div class="sticky-top">
                    <div id="user-box">
                        <div class="avatar-box">
                            <img class="avatar" src="uploads/avatar/${user.avatar}" alt="">
                        </div>
                        <div class="username">
                            ${user.nickName}
                        </div>
                        <div class="email">
                            ${user.email}
                        </div>
                        <div class="status-box">
                            <div class="status-item">
                                <div class="status-item-name">动态</div>
                                <div class="status-count">${user.blogCount}</div>
                            </div>
                            <div class="status-item">
                                <div class="status-item-name">收藏</div>
                                <div class="status-count">${user.collectionCount}</div>
                            </div>
                            <div class="status-item">
                                <div class="status-item-name">关注</div>
                                <div class="status-count">${user.subscribeCount}</div>
                            </div>
                        </div>
                        <div class="btn-box"><button onclick="showPopupPanel()" id="changeInfo-btn"
                                class="btn btn-outline-primary">修改信息</button></div>
                        <div class="btn-box">
                            <form action="LogoutServlet" method="post">
                                <button onclick="return logout()" type="submit" id="logout-btn"
                                    class="btn btn-outline-danger">注销</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </c:if>
        <div id="blog-box">
            <div id="tabbar" class="sticky-top">
                <div class="tabbar-item"><span class="iconfont icon-gongsidongtai"></span><a
                        href="UserHomeServlet?userId=${user.id}">动态</a></div>
                <div class="tabbar-item"><span class="iconfont icon-collection"></span><a
                        href="UserCollectionsServlet?userId=${user.id}">收藏</a></div>
                <div class="tabbar-item active"><span class="iconfont icon-love"></span><a
                        href="UserSubscribeServlet?userId=${user.id}">关注</a></div>
            </div>
            <c:if test="${subscribes.size()==0}">
                <div class="item-box">
                    暂无关注
                </div>
            </c:if>
            <c:if test="${subscribes.size()>0}">
                <div class="item-box">
                    <c:forEach var="item" items="${subscribes}">
                        <div class="subscribe-box">
                            <div class="left">
                                <div class="avatar-box">
                                    <img src="uploads/avatar/${item.avatar}" alt="头像" />
                                </div>
                                <div class="userinfo-box">
                                    <div class="username">${item.nickName}</div>
                                    <div class="status-box">
                                        <div class="status-item">
                                            <div class="status-item-name">动态</div>
                                            <div class="status-count">${item.blogCount}</div>
                                        </div>
                                        <div class="status-item">
                                            <div class="status-item-name">收藏</div>
                                            <div class="status-count">${item.collectionCount}</div>
                                        </div>
                                        <div class="status-item">
                                            <div class="status-item-name">关注</div>
                                            <div class="status-count">${item.subscribeCount}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="btn-box">
                                <form action="UnSubscribeServlet" method="post" onclick="return unSubscribe()">
                                    <input type="hidden" name="userId" value="${user.id}" />
                                    <input type="hidden" name="targetId" value="${item.id}" />
                                    <button class="btn btn-danger">取消关注</button>
                                </form>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </c:if>
        </div>
    </div>
    <div id="update-mask">
        <div class="pop-panel">
            <form action="UpdateUserInfoServlet" enctype="multipart/form-data" method="post">
                <input type="hidden" name="id" value="${user.id}">
                <h4>修改信息</h4>
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" class="form-control" name="nickName">
                </div>
                <div class="form-group">
                    <label>邮箱</label>
                    <input type="email" class="form-control" name="email">
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" class="form-control" name="password">
                </div>
                <label>修改头像</label>
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="customFile" name="avatar">
                    <label class="custom-file-label" for="customFile">选择头像</label>
                </div>
                <div class="btn-group">
                    <button class="btn btn-success" type="submit">提交</button>
                    <button type="button" onclick="showPopupPanel()" class="btn btn-outline-secondary"
                        type="submit">取消</button>
                </div>
            </form>
        </div>
    </div>
</body>
<script src="public/js/jquery/jquery.js"></script>
<script src="public/js/typewriter.js"></script>

<script>
    function unSubscribe() {
        let ret = confirm("确认取消关注？")
        return ret;
    }

    function logout() {
        let ret = confirm("确认要注销？")
        return ret;
    }

    let popFlag = false

    function showPopupPanel() {
        popFlag = !popFlag
        if (popFlag) {
            $("#update-mask").css("display", "flex")
        } else {
            $("#update-mask").css("display", "none")
            return
        }
    }
</script>

</html>